<!-- Action -->
<!-- Author: Edwin -->
<template>
  <div class='c-action'>
    <div class="c-action-item"
         v-for="item in actionList"
         :key="item.code">
      <div class="c-action-item-icon">
        <el-image :src="item.icon"></el-image>
      </div>
      <div class="c-action-item-content">
        <div class="c-action-item-content-title">
          <el-button type="text"
                     @click="clickModules(item.code)">{{ item.title }}</el-button>
        </div>
        <div class="c-action-item-content-tips">{{ item.tips }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      actionList: [
        {
          code: 'start',
          icon: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2204744991,389265874&fm=26&gp=0.jpg',
          title: 'Start / Stop',
          tips: 'This is the introduction.'
        },
        {
          code: 'read',
          icon: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2204744991,389265874&fm=26&gp=0.jpg',
          title: 'Read Me',
          tips: 'This is the introduction.2222222222222222222222222222222222'
        },
        {
          code: 'alarm',
          icon: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2204744991,389265874&fm=26&gp=0.jpg',
          title: 'Alarm Config',
          tips: 'This is the introduction.'
        },
        {
          code: 'emergency',
          icon: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2204744991,389265874&fm=26&gp=0.jpg',
          title: 'Emergency Config',
          tips: 'This is the introduction.'
        }
      ]
    }
  },
  methods: {
    clickModules (code) {
      switch (code) {
        case 'start':
          return this.startOrStop()
        case 'read':
          return this.readMe()
        case 'alarm':
          return this.alarmConfig()
        case 'emergency':
          return this.emergencyConfig()
        default:
          break
      }
    },
    startOrStop () {
    },
    readMe () {
    },
    alarmConfig () {
    },
    emergencyConfig () {
    }
  }
}
</script>

<style scoped lang="scss">
@import "./console.scss";
</style>
